<template>
  <div class="main">
    <div class="top">
      <div class="name">{{ obj.shopName }}</div>
      <div class="status" v-if="obj.status == 7">已取消</div>
      <div class="status" v-if="obj.status == 9" style="color: rgba(199, 199, 199, 1);">已完成</div>
      <div class="status" v-if="obj.status == 0">等待买家付款</div>
      <div class="status" v-if="obj.status == 1">买家已付款</div>
      <div class="status" v-if="obj.status == 2">卖家已发货</div>
      <div class="status" v-if="obj.status == 8">已关闭</div>
      <div class="status" v-if="obj.status == 3">待评价</div>
      <div class="status" v-if="obj.status == 4">退款中</div>
      <div class="status" v-if="obj.status == 5">退款成功</div>
      <div class="status" v-if="obj.status == 6">退款失败</div>
    </div>
    <div class="middle" @click="gotoOrderDetail(obj)">
      <img :src="store.state.imgUrl+obj.picture"/>
      <div class="desc" style="width: 200px;">
        <div class="name">{{ obj.name }}</div>
        <div class="sku">
          <div class="sku-name"> {{ Object.values(JSON.parse(obj.sku)).join('/') }}</div>
          <div class="sku-num">× {{ obj.num }}</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="sfk-pay">
        实付款：￥{{ obj.allPrice }}
      </div>
      <div class="btn-all">
        <div class="btn" v-if="obj.status == 8 || obj.status==9 || obj.status == 7" @click="deleteOrder(obj)">删除订单
        </div>
        <div class="btn" v-if="obj.status == 0" @click="continuePay(obj)">继续付款</div>
        <!--        <div class="btn" v-if="obj.status == 0 || obj.status==1" @click="modifyAddress(obj)">修改地址</div>-->
        <!--        <div class="btn">查看物流</div>-->
        <div class="btn" v-if="obj.status == 2" @click="confirmOrder(obj)">确认收货</div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "../../../../store";
import {confirmOrder, deleteOrderRecord} from "../../../../api/shopping";

export default {
  name: "orderListItem",
  props: {
    obj: {
      type: Object,
      require: true
    }
  },
  mounted() {
    console.log('orderListitem', this.obj)
  },
  data() {
    return {
      store: store,
      title: '每一个订单列表',
      bg: require('@/assets/shopping/bg.png')
    }
  },
  methods: {
    gotoOrderDetail(obj) {
      if (obj.status == 0) {
        this.$router.push({path: "/payStatus", query: {id: obj.id}})
      } else {
        this.$router.push({path: "/orderDetail", query: {id: obj.id}})
      }
    },
    deleteOrder(item) {
      let data = {
        id: item.id
      }
      deleteOrderRecord(data).then(res => {
        if (res.success) {
          this.$toast.success('删除订单成功')
          this.$emit('call-father')
        }
      })
    },
    confirmOrder(obj) {
      let data = {
        id: obj.id
      }
      console.log(data)
      confirmOrder(data).then(res => {
        if (res.data) {
          this.$toast.success('确认收货成功')
          //调用父组件的onLoad()
          this.$emit('call-father')
        }
      })
    },
    //修改地址
    modifyAddress() {

    },
    //继续付款 跳转继续付款页面
    continuePay(obj) {
      this.$router.push({path: '/payStatus', query: {id: obj.id}})
    },
  }
}
</script>

<style scoped lang="less">
.main {
  //height: 100vh;
  padding: 10px 18px;
  background: #ffffff;
  margin-bottom: 10px;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name {
      font-size: 16px;
      font-weight: 500;
      line-height: 23.17px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
    }

    .status {
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24px;
      color: rgba(255, 0, 0, 1);
      text-align: right;
    }
  }

  .middle {
    margin-top: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;

      .name {
        font-size: 16px;
        font-weight: 500;
        line-height: 23.17px;
        color: rgba(29, 22, 23, 1);
        text-overflow: ellipsis;
        overflow: hidden;
        //display: inline-block;
        white-space: nowrap;
        //width: 230px;
      }

      > img {
        width: 118px;
        height: 118px;
      }

      .sku {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .sku-name {
          width: 154px;
          height: 48px;
          font-size: 15px;
          font-weight: 400;
          line-height: 48px;
          color: rgba(199, 199, 199, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .sku-num {
          font-size: 15px;
          font-weight: 400;
          line-height: 24px;
          color: rgba(128, 128, 128, 1);
        }
      }


  }

  .footer {
    .sfk-pay {
      text-align: right;
      font-size: 16px;
      font-weight: 500;
      line-height: 23.17px;
      color: rgba(35, 31, 32, 1);
    }

    .btn-all {
      display: flex;
      //justify-content: f;
      align-items: center;
      justify-content: flex-end;
      margin-top: 10px;

      .btn {
        margin-left: 10px;
        font-size: 16px;
        font-weight: 500;
        line-height: 23.17px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        width: 80px;
        height: 25.21px;
        opacity: 1;
        border-radius: 7px;
        background: rgba(242, 150, 0, 1);
      }
    }

  }
}
</style>
